<template>
  <!-- 用户表格 -->
  <div class="userTable">
    <el-table
      ref="userTable"
      :data="userData"
      highlight-current-row
      border
      tooltip-effect="dark"
      style="width: 100%; height: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="40"
      />
      <el-table-column
        align="center"
        prop="num"
        label="序号"
        width="85"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="code"
        label="工号"
        width="120"
      />
      <el-table-column
        align="center"
        prop="name"
        label="用户名"
        width="120"
      />
      <el-table-column
        align="center"
        prop="company.name"
        label="所属公司"
        width="150"
      />
      <el-table-column
        align="center"
        prop="department.name"
        label="所属部门"
        width="150"
      />
      <el-table-column
        align="center"
        prop="roleList"
        label="所属角色"
        width="150"
      >
        <template slot-scope="scope">
          <span v-for="(item2, index) in scope.row.roleList" :key="index">
            {{ item2.name }}&nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="position.name"
        label="职位"
        width="150"
      />
      <el-table-column
        align="center"
        prop="sex"
        label="性别"
        width="150"
      />
      <el-table-column
        align="center"
        prop="birthday"
        label="生日"
        width="150"
      />
      <el-table-column
        align="center"
        prop="tel"
        label="电话"
        width="150"
      />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="150"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 1 ? 'success' : 'primary'"
            disable-transitions
          >{{ scope.row.status === 1 ? '启用' : '停用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
        min-width="250"
      >
        <template slot-scope="scope">
          <el-button
            class="elBtn"
            size="mini"
            type="primary"
            @click="Copy(scope.row)"
          >复制</el-button>
          <el-button
            class="elBtn"
            size="mini"
            @click="Edit(scope.row)"
          >编辑</el-button>
          <el-button
            class="elBtn"
            size="mini"
            type="danger"
            @click="Delete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    userData: Array, // 用户信息
    userPage: Object, // 页码
    selection: Function, // 选择传参
    rowCopy: Function, // 复制
    rowEdit: Function, // 编辑
    rowDelete: Function // 删除
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    // 选择器
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.selection(this.multipleSelection)
    },
    // 复制
    Copy(row) {
      this.rowCopy(row)
    },
    // 编辑
    Edit(row) {
      this.rowEdit(row)
    },
    // 删除
    Delete(row) {
      this.rowDelete(row)
    }
  }
}
</script>
